/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/

@import url("tools/typography.css");
@import url("shared/option-list.css");

:host {
  --wrapper-padding-inline-end: var(--spacing-8);

  border: solid 2px transparent;

  &:focus-visible {
    border-color: var(--color-secondary);
    border-radius: 4px;
    outline: none;
  }
}

.selected-story {
  background: var(--color-gray20);
  border-color: var(--color-secondary);
}

.header {
  align-items: center;
  cursor: pointer;
  display: flex;
  min-block-size: var(--spacing-48);
  padding: var(--spacing-8);
  position: relative;
}

.status-options-menu {
  margin-inline-start: auto;
}

.view-options-list {
  @mixin option-list;
}

.separator {
  @mixin separator;
}

.color {
  aspect-ratio: 1 / 1;
  block-size: 12px;
  border: 3px solid;
  border-radius: 6px;
  margin-inline-end: var(--spacing-8);
}

.name {
  color: var(--color-gray100);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-medium);
}

tg-kanban-story {
  margin-block-end: var(--spacing-8);

  /* This will cause a weird scroll behavior if status doesn't have appendOnly (the scroll will move by itself a few px in loop), becasue the same story will have diffrent height when is calculate in kanban-scroll-strategy */
  &:first-child {
    margin-block-start: var(--spacing-4);
  }
}

.empty {
  align-items: center;
  background-color: var(--color-gray20);
  border-radius: 4px;
  box-sizing: content-box;
  color: var(--color-gray80);
  display: flex;
  font-style: italic;
  justify-content: center;
  min-block-size: 25px;
  padding: var(--spacing-8);
  text-align: center;
}

.stories {
  max-block-size: 100%;

  &::ng-deep .cdk-virtual-scroll-content-wrapper {
    max-inline-size: 100%;
    padding-inline-end: var(--wrapper-padding-inline-end);
  }
}

.wrapper {
  background: var(--color-gray10);
  block-size: 100%;
  display: flex;
  flex-direction: column;
  padding-block-end: var(--spacing-8);
  padding-block-start: var(--spacing-4);
  padding-inline-start: var(--spacing-8);
}

.create-story {
  margin-block: var(--spacing-8);
  padding-block-end: var(--spacing-8);
}
